.page-video {
  height: 100%
  .left-box-label {
    width: 60px
  }
  .param-line {
    padding: 0 10px
    span.title-text {
      color: var(--img-title-text-color)
    }
    .submit-btn {
      text-align: center
      .el-button {
        width: 100%
      }
    }
    .el-icon {
      position: relative
    }
    .grid-content {
      padding: 8px 14px
      display: flex
      cursor: pointer
      margin-bottom: 10px
      border: 1px solid var(--img-tpbl-border)
      &:hover {
        border: 1px solid
        border-image-source: linear-gradient(to right, #4FACFE, #00F2FE)
        border-image-slice: 1
      }
      .icon {
        width: 20px
        height: 20px
        // margin-bottom: 5px
      }
      .text {
        margin-left: 5px
        margin-top: 2px
        color: var(--img-tag-color)
      }
    }
    .grid-content.active {
      backgroundv: var(--liner)
      -webkit-background-clip: text
      background-clip: text
      color: transparent
      // background-color: #585858
      border: 1px solid
      border-image-source: var(--liner)
      border-image-slice: 1
    }
    .model {
      background-color: var(--img-tpbl-border)
      border: 1px solid #454545
      border-radius: 5px
      padding: 5px
      margin-bottom: 10px
      display: flex
      flex-flow: column
      align-items: center
      cursor: pointer
      &:hover {
        background-color: #585858
      }
      .el-image {
        height: 30px
        width: 100%
      }
      .text {
        margin-top: 4px
        font-size: 12px
      }
    }
    .model.active {
      color: #47fff1
      background-color: #585858
      border: 1px solid #47fff1
    }
    .form-item-inner {
      display: flex
      align-items: center
      height: 30px
      padding: 10px 15px
      display: flex
      justify-content: center
      justify-items: center
      // border-top: 1px solid #00CCFF
      .role-select-label {
        color: #ffffff
      }
      .el-select {
        max-width: 150px
        margin-right: 10px
      }
      .role-select {
        max-width: 130px
      }
      .setting {
        padding: 5px
        border-radius: 5px
        cursor: pointer
        .iconfont {
          font-size: 18px
        }
        &:hover {
          // background: #D5FAD3
        }
      }
      .el-button {
        .el-icon {
          margin-right: 5px
        }
      }
      .el-input__wrapper {
        background: var(--img-tpbl-border)
      }
      .el-input__inner {
        color: #fff
      }
      .el-icon {
        margin-left: 10px
      }
    }
  }
  .inner {
    height: 100%
    display: flex
    .left-box {
      margin-left: 10px
      padding: 0 10px 20px 10px
      background: var(--img-group-bg)
      border-radius: 10px
      overflow: auto
      .page-title {
        width: 100%
        text-align: center
        img {
          width: 320px
        }
      }
      .image-container {
        width: 100%
        .posr {
          height: 180px
        }
        .el-image {
          height: 180px
          // width: 120px
          border-radius: 5px
        }
        .imgBlur {
          filter: blur(32px)
          opacity: 0.5
          position: absolute
          width: 100%
          height: 100%
        }
        .preview-img {
          width: 100%
          height: 100%
          position: absolute
          left: 0
        }
        .el-button {
          position: absolute
          right: 5px
          top: 5px
          width: 20px
          height: 20px
        }
        .overlay {
          opacity: 0
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background: rgba(0, 0, 0, 0.5) /* 半透明背景 */
          display: flex
          align-items: center
          justify-content: center
          transition: opacity 0.3s ease
          &:hover {
            opacity: 1
          }
        }
      }
      .upload-edit {
        .icon-tihuan {
          color: var(--upload-edit-textColor)
        }
        li {
          color: var(--upload-edit-textColor)
          width: 110px
          height: 40px
          padding: 4px
          background: var(--upload-edit-bg)
          border-radius: 8px
          cursor: pointer
          border: 1px solid rgba(27, 229, 236, 0)
          position: relative
          &:hover, &.active {
            border: 1px solid #9da1a3
          }
          &:hover {
            .hidden {
              display: block
            }
          }
          .icon-add {
            font-size: 28px
            color: #6c757a
          }
          .el-image {
            width: 28px
            height: 28px
            border-radius: 4px
            background: #ffffff1f
          }
          .upload-edit__delete {
            cursor: pointer
            transform: translate(50%, -50%)
            top: 0
            right: 0
            display: none
            position: absolute !important
            font-size: 24px
            z-index: 99
          }
        }
      }
      .img-uploader {
        .el-upload {
          border: 1px dashed var(--el-border-color)
          border-radius: 6px
          cursor: pointer
          position: relative
          overflow: hidden
          width: 100%
          transition: var(--el-transition-duration-fast)
          &:hover {
            border-color: var(--el-color-primary)
          }
          .el-icon.uploader-icon {
            font-size: 28px
            color: #8c939d
            width: 100%
            height: 50px
            text-align: center
          }
        }
      }
      // 隐藏滚动条
      ::-webkit-scrollbar {
        width: 0
        height: 0
        background-color: transparent
      }
      .video-params {
        margin-top: 10px
        overflow: auto
        min-width: 340px
        max-width: 340px
        .video-box {
          border-radius: 10px
          color: #ffffff
          font-size: 13px
          overflow: auto
          .title {
            display: flex
            margin: 10px 0 5px 0
            .title-icon {
              width: 28px
              height: 28px
            }
            .title-text {
              font-size: 13px
              line-height: 30px
            }
          }
          .param-line {
            padding: 0 10px
            .grid-content, .form-item-inner {
              display: flex
              .info-icon {
                margin-left: 10px
                position: relative
                top: 8px
              }
            }
          }
          .video-slider {
            font-size: 13px
            line-height: 32px
          }
          .param-line.pt {
            padding-top: 5px
            padding-bottom: 5px
          }
        }
        .text-info {
          padding: 10px
          text-align: center
        }
      }
      .submit-btn {
        padding: 10px
        text-align: center
        .el-button {
          width: 100%
          height: 50px
          span {
            color: #2D3A4B
          }
        }
      }
    }
    .el-form {
      .el-form-item__label {
        color: #ffffff
      }
    }
    .task-list-box {
      width: 300px
      padding: 0 10px 0 10px
      color: #ffffff
      background: var(--img-history-bg)
      border: solid 1px var(--img-history-border)
      border-radius: 20px
      overflow-x: hidden
      box-sizing: border-box
      h2 {
        margin: 15px
        color: var(--img-title-text-color)
      }
      .task-list-inner {
        .el-tabs {
          --el-tabs-header-height: 55px
        }
        .title-tabs .el-tabs__item {
          color: #fff
          font-size: 18px
        }
        .title-tabs .el-tabs__item.is-active {
          color: #ff0000
          font-size: 38px
        }
        .title-tabs .el-tabs__active-bar {
          background-color: #47FFF1
        }
        .el-textarea {
          --el-input-focus-border-color: #47FFF1
        }
        .el-textarea__inner {
          background: transparent
          color: #fff
        }
        .el-input__wrapper {
          background: transparent
          padding: 5px
        }
        .text {
          margin-bottom: 10px
          color: #6b778c
          font-size: 15px
        }
        .param-line.pt {
          padding-top: 5px
          padding-bottom: 5px
        }
        .form-item-inner {
          display: flex
          align-items: center
          .el-icon {
            margin-left: 10px
          }
        }
        .el-form-item__label {
          color: #ffffff
        }
        // 图片上传样式
        .img-inline {
          display: flex
          .img-uploader {
            .el-upload {
              border: 1px dashed var(--el-border-color)
              border-radius: 6px
              cursor: pointer
              position: relative
              overflow: hidden
              width: 120px
              transition: var(--el-transition-duration-fast)
              margin-bottom: 20px
              &:hover {
                border-color: var(--el-color-primary)
              }
              .el-icon.uploader-icon {
                font-size: 28px
                color: #8c939d
                width: 100%
                height: 120px
                text-align: center
              }
            }
          }
          .img-list-box {
            display: flex
            .img-item {
              width: 120px
              position: relative
              margin-right: 10px
              .el-image {
                width: 120px
                height: 120px
                border-radius: 5px
              }
              .el-button {
                position: absolute
                right: 5px
                top: 5px
                width: 20px
                height: 20px
              }
            }
          }
        }
        .el-row.text-info {
          width: 100%
          padding: 10px 0
          .el-tag {
            margin-right: 10px
          }
        }
        // 提交按钮
        .submit-btn {
          display: flex
          margin: 20px 0
          .el-button {
            width: 200px
          }
        }
        // 任务列表
        .job-list-box {
          @import 'running-job-list.styl'
          .waterfall-box {
            overflow-x: hidden
            overflow-y: auto
          }
          .finish-job-list {
            .job-item {
              height: 145px
              margin: 10px 0
              border-radius: 6px
              width: 100%
              border: 1px solid #223a63
              overflow: hidden
              border-radius: 6px
              transition: all 0.3s ease /* 添加过渡效果 */
              position: relative
              .gallery-icon {
                // opacity: 0
                position: absolute
                top: 10px
                right: 10px
                z-index: 99
                .gallery-icon-inner {
                  font-size: 14px
                  cursor: pointer
                  padding: 3px 5px
                  background: var(--img-group-bg)
                  border-radius: 3px
                  color: var(--img-tag-color)
                }
              }
              &:hover {
                .gallery-icon {
                  opacity: 1
                }
              }
              &:hover {
                .video-mask {
                  background: rgba(0, 0, 0, 0)
                }
              }
              &.active {
                .video-mask {
                  background: rgba(0, 0, 0, 0)
                }
              }
              .video-mask {
                position: absolute
                background: rgba(0, 0, 0, 0.3)
                width: 100%
                height: 100%
                z-index: 11
                cursor: pointer
              }
              .opt {
                .opt-line {
                  margin: 6px 0
                  ul {
                    display: flex
                    flex-flow: row
                    li {
                      margin-right: 6px
                      a {
                        padding: 3px 0
                        width: 40px
                        text-align: center
                        border-radius: 5px
                        display: block
                        cursor: pointer
                        background-color: #4E5058
                        color: #ffffff
                        &:hover {
                          background-color: #6D6F78
                        }
                      }
                    }
                    .show-prompt {
                      font-size: 20px
                      cursor: pointer
                    }
                  }
                }
              }
              .remove {
                display: none
                position: absolute
                right: 10px
                top: 10px
              }
              &:hover {
                .remove {
                  display: block
                }
              }
            }
            .animate {
              &:hover {
                box-shadow: 0 0 10px rgba(71, 255, 241, 0.6) /* 添加阴影效果 */
                transform: translateY(-10px) /* 向上移动10像素 */
              }
            }
          }
          .el-image {
            width: 100%
            height: 100%
            overflow: visible
            .el-image-viewer__wrapper {
              img {
                width: auto
                height: auto
              }
            }
            .image-slot {
              display: flex
              flex-flow: column
              justify-content: center
              align-items: center
              min-height: 200px
              color: #ffffff
              .iconfont {
                font-size: 50px
                margin-bottom: 10px
              }
            }
          }
          .el-image.upscale {
            img {
              height: 310px
            }
            .image-slot {
              height: 310px
            }
            .el-image-viewer__wrapper {
              img {
                width: auto
                height: auto
              }
            }
          }
        }
      }
      .no-more-data {
        text-align: center
        padding: 30px
      }
    }
  }
  @import 'sd-task-dialog.styl'
  .mj-list-item-prompt {
    .el-icon {
      margin-left: 10px
      cursor: pointer
      position: relative
      top: 2px
    }
  }
}
.video-params {
  .title-tabs {
    .el-tabs__active-bar {
      background-color: #1be5ec
    }
    .el-tabs__item {
      color: #fff
      &.is-active {
        color: #ff0000
        font-weight: 800
        font-size: 1.1em
      }
    }
  }
  .tabs-label {
    display: flex
    align-items: center
    span {
      font-weight: 700
      font-size: 16px
    }
  }
}
// 新增样式
:deep() {
  .el-button {
    --el-button-hover-text-color: #fff
  }
  .el-upload-dragger {
    background: var(--img-textarea-bg)
    border: none
  }
  .page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload {
    border: none
  }
  .el-tabs__item.is-active {
    background: var(--liner)
    -webkit-background-clip: text
    background-clip: text
    color: transparent
    // background-color: #585858
    // border: 1px solid;
    border-image-source: var(--liner)
    border-image-slice: 1
  }
  .el-tabs__item {
    color: #7D839C
  }
  .el-tabs__active-bar {
    background: var(--liner)
  }
  .el-slider__runway {
    background: var(--video-slider-right-bg)
  }
  .el-slider__bar {
    background: var(--video-slider-bg)
  }
  .el-tabs__nav-wrap {
    // width:80%
    margin: 0 auto 4px 10px
    flex: none
  }
  // 去掉el-tabs默认下划线
  .el-tabs__nav-wrap::after {
    height: 0px !important
  }
  .el-slider__marks-text {
    font-size: 12px
  }
}
.sun-color {
  color: #5A566D
}
.el-upload-dragger svg {
  display: none
}
.base-color {
  color: #5A566D
}
.el-radio {
  --el-radio-input-height: 10px
  --el-radio-input-width: 10px
  --el-radio-font-size: 12px
  color: var(--img-tag-color)
}
